<template>
  <!-- 隐藏的预览图像 -->
  <a-image v-if="visible" :width="0" :style="{ position: 'absolute', visibility: 'hidden' }" :preview="{
    visible,
    onVisibleChange: handleVisibleChange,
  }" :src="currentImageUrl" />
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const visible = ref(false)
const currentImageUrl = ref('')

// 暴露给外部的方法
const open = (url: string) => {
  currentImageUrl.value = url
  visible.value = true
}

const handleVisibleChange = (value: boolean) => {
  visible.value = value
}

// 暴露open方法
defineExpose({
  open
})
</script>